﻿@page
@using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo
@model Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components.CarouselsModel
@{
    ViewData["Title"] = "Carousels";

    var firstSlide = "";
    var secondSlide = "";
    var thirdSlide = "";

}


<h2>Carousels</h2>

<p>Based on <a href="@BootstrapUrlHelper.GetDocUrl("components/carousel")" target="_blank"> Bootstrap Carousel</a>.</p>

<h4>Slides only</h4>

<div class="demo-with-code">
    <div class="demo-area">
        <abp-carousel indicators="false" controls="false">
            <abp-carousel-item src="@firstSlide"></abp-carousel-item>
            <abp-carousel-item src="@secondSlide"></abp-carousel-item>
            <abp-carousel-item src="@thirdSlide"></abp-carousel-item>
        </abp-carousel>
    </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Tag Helper">
                <pre><code>
&lt;abp-carousel indicators=&quot;false&quot; controls=&quot;false&quot;&gt;
    &lt;abp-carousel-item src=&quot;...&quot;&gt;&lt;/abp-carousel-item&gt;
    &lt;abp-carousel-item src=&quot;...&quot;&gt;&lt;/abp-carousel-item&gt;
    &lt;abp-carousel-item src=&quot;...&quot;&gt;&lt;/abp-carousel-item&gt;
&lt;/abp-carousel&gt;
</code></pre>
            </abp-tab>
            <abp-tab title="Rendered">
                <pre><code>
&lt;div id=&quot;carouselExampleSlidesOnly&quot; class=&quot;carousel slide&quot; data-bs-ride=&quot;carousel&quot;&gt;
  &lt;div class=&quot;carousel-inner&quot;&gt;
    &lt;div class=&quot;carousel-item active&quot;&gt;
      &lt;img class=&quot;d-block w-100&quot; src=&quot;...&quot; alt=&quot;First slide&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;carousel-item&quot;&gt;
      &lt;img class=&quot;d-block w-100&quot; src=&quot;...&quot; alt=&quot;Second slide&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;carousel-item&quot;&gt;
      &lt;img class=&quot;d-block w-100&quot; src=&quot;...&quot; alt=&quot;Third slide&quot;&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>
</div>

<h4>With controls</h4>

<div class="demo-with-code">
    <div class="demo-area">

        <abp-carousel indicators="false">
            <abp-carousel-item src="@firstSlide"></abp-carousel-item>
            <abp-carousel-item src="@secondSlide"></abp-carousel-item>
            <abp-carousel-item src="@thirdSlide"></abp-carousel-item>
        </abp-carousel>
    </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Tag Helper">
                <pre><code>
&lt;abp-carousel indicators=&quot;false&quot;&gt;
    &lt;abp-carousel-item src=&quot;...&quot;&gt;&lt;/abp-carousel-item&gt;
    &lt;abp-carousel-item src=&quot;...&quot;&gt;&lt;/abp-carousel-item&gt;
    &lt;abp-carousel-item src=&quot;...&quot;&gt;&lt;/abp-carousel-item&gt;
&lt;/abp-carousel&gt;
</code></pre>
            </abp-tab>
            <abp-tab title="Rendered">
                <pre><code>
&lt;div id=&quot;carouselExampleControls&quot; class=&quot;carousel slide&quot; data-bs-ride=&quot;carousel&quot;&gt;
  &lt;div class=&quot;carousel-inner&quot;&gt;
    &lt;div class=&quot;carousel-item active&quot;&gt;
      &lt;img class=&quot;d-block w-100&quot; src=&quot;.../800x400?auto=yes&amp;bg=777&amp;fg=555&amp;text=First slide&quot; alt=&quot;First slide&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;carousel-item&quot;&gt;
      &lt;img class=&quot;d-block w-100&quot; src=&quot;.../800x400?auto=yes&amp;bg=666&amp;fg=444&amp;text=Second slide&quot; alt=&quot;Second slide&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;carousel-item&quot;&gt;
      &lt;img class=&quot;d-block w-100&quot; src=&quot;.../800x400?auto=yes&amp;bg=555&amp;fg=333&amp;text=Third slide&quot; alt=&quot;Third slide&quot;&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;a class=&quot;carousel-control-prev&quot; href=&quot;#carouselExampleControls&quot; role=&quot;button&quot; data-bs-slide=&quot;prev&quot;&gt;
    &lt;span class=&quot;carousel-control-prev-icon&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
    &lt;span class=&quot;visually-hidden&quot;&gt;Previous&lt;/span&gt;
  &lt;/a&gt;
  &lt;a class=&quot;carousel-control-next&quot; href=&quot;#carouselExampleControls&quot; role=&quot;button&quot; data-bs-slide=&quot;next&quot;&gt;
    &lt;span class=&quot;carousel-control-next-icon&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
    &lt;span class=&quot;visually-hidden&quot;&gt;Next&lt;/span&gt;
  &lt;/a&gt;
&lt;/div&gt;
</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>
</div>

<h4>With indicators</h4>

<div class="demo-with-code">
    <div class="demo-area">

        <abp-carousel>
            <abp-carousel-item src="@firstSlide"></abp-carousel-item>
            <abp-carousel-item src="@secondSlide"></abp-carousel-item>
            <abp-carousel-item src="@thirdSlide"></abp-carousel-item>
        </abp-carousel>
    </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Tag Helper">
                <pre><code>
&lt;abp-carousel&gt;
    &lt;abp-carousel-item src=&quot;...&quot;&gt;&lt;/abp-carousel-item&gt;
    &lt;abp-carousel-item src=&quot;...&quot;&gt;&lt;/abp-carousel-item&gt;
    &lt;abp-carousel-item src=&quot;...&quot;&gt;&lt;/abp-carousel-item&gt;
&lt;/abp-carousel&gt;
</code></pre>
            </abp-tab>
            <abp-tab title="Rendered">
                <pre><code>
&lt;div id=&quot;carouselExampleIndicators&quot; class=&quot;carousel slide&quot; data-bs-ride=&quot;carousel&quot;&gt;
  &lt;ol class=&quot;carousel-indicators&quot;&gt;
    &lt;li data-bs-target=&quot;#carouselExampleIndicators&quot; data-bs-slide-to=&quot;0&quot; class=&quot;active&quot;&gt;&lt;/li&gt;
    &lt;li data-bs-target=&quot;#carouselExampleIndicators&quot; data-bs-slide-to=&quot;1&quot;&gt;&lt;/li&gt;
    &lt;li data-bs-target=&quot;#carouselExampleIndicators&quot; data-bs-slide-to=&quot;2&quot;&gt;&lt;/li&gt;
  &lt;/ol&gt;
  &lt;div class=&quot;carousel-inner&quot;&gt;
    &lt;div class=&quot;carousel-item active&quot;&gt;
      &lt;img class=&quot;d-block w-100&quot; src=&quot;.../800x400?auto=yes&amp;bg=777&amp;fg=555&amp;text=First slide&quot; alt=&quot;First slide&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;carousel-item&quot;&gt;
      &lt;img class=&quot;d-block w-100&quot; src=&quot;.../800x400?auto=yes&amp;bg=666&amp;fg=444&amp;text=Second slide&quot; alt=&quot;Second slide&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;carousel-item&quot;&gt;
      &lt;img class=&quot;d-block w-100&quot; src=&quot;.../800x400?auto=yes&amp;bg=555&amp;fg=333&amp;text=Third slide&quot; alt=&quot;Third slide&quot;&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;a class=&quot;carousel-control-prev&quot; href=&quot;#carouselExampleIndicators&quot; role=&quot;button&quot; data-bs-slide=&quot;prev&quot;&gt;
    &lt;span class=&quot;carousel-control-prev-icon&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
    &lt;span class=&quot;visually-hidden&quot;&gt;Previous&lt;/span&gt;
  &lt;/a&gt;
  &lt;a class=&quot;carousel-control-next&quot; href=&quot;#carouselExampleIndicators&quot; role=&quot;button&quot; data-bs-slide=&quot;next&quot;&gt;
    &lt;span class=&quot;carousel-control-next-icon&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
    &lt;span class=&quot;visually-hidden&quot;&gt;Next&lt;/span&gt;
  &lt;/a&gt;
&lt;/div&gt;
</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>
</div>

<h4>With captions</h4>

<div class="demo-with-code">
    <div class="demo-area">

        <abp-carousel>
            <abp-carousel-item caption-title="Second slide label" caption="Lorem ipsum dolor sit amet, consectetur adipiscing elit." src="@firstSlide"></abp-carousel-item>
        </abp-carousel>
    </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Tag Helper">
                <pre><code>
&lt;abp-carousel&gt;
    &lt;abp-carousel-item caption-title=&quot;Second slide label&quot; caption=&quot;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&quot; src=&quot;...&quot;&gt;&lt;/abp-carousel-item&gt;
&lt;/abp-carousel&gt;
</code></pre>
            </abp-tab>
            <abp-tab title="Rendered">
                <pre><code>
&lt;div id=&quot;carouselExampleIndicators&quot; class=&quot;carousel slide&quot; data-bs-ride=&quot;carousel&quot;&gt;
  &lt;ol class=&quot;carousel-indicators&quot;&gt;
    &lt;li data-bs-target=&quot;#carouselExampleIndicators&quot; data-bs-slide-to=&quot;0&quot; class=&quot;active&quot;&gt;&lt;/li&gt;
    &lt;li data-bs-target=&quot;#carouselExampleIndicators&quot; data-bs-slide-to=&quot;1&quot;&gt;&lt;/li&gt;
    &lt;li data-bs-target=&quot;#carouselExampleIndicators&quot; data-bs-slide-to=&quot;2&quot;&gt;&lt;/li&gt;
  &lt;/ol&gt;
  &lt;div class=&quot;carousel-inner&quot;&gt;
    &lt;div class=&quot;carousel-item active&quot;&gt;
      &lt;img class=&quot;d-block w-100&quot; src=&quot;.../800x400?auto=yes&amp;bg=777&amp;fg=555&amp;text=First slide&quot; alt=&quot;First slide&quot;&gt;
        &lt;div class=&quot;carousel-caption d-none d-md-block&quot;&gt;
            &lt;h5&gt;Second slide label&lt;/h5&gt;
            &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&lt;/p&gt;
        &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;a class=&quot;carousel-control-prev&quot; href=&quot;#carouselExampleIndicators&quot; role=&quot;button&quot; data-bs-slide=&quot;prev&quot;&gt;
    &lt;span class=&quot;carousel-control-prev-icon&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
    &lt;span class=&quot;visually-hidden&quot;&gt;Previous&lt;/span&gt;
  &lt;/a&gt;
  &lt;a class=&quot;carousel-control-next&quot; href=&quot;#carouselExampleIndicators&quot; role=&quot;button&quot; data-bs-slide=&quot;next&quot;&gt;
    &lt;span class=&quot;carousel-control-next-icon&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
    &lt;span class=&quot;visually-hidden&quot;&gt;Next&lt;/span&gt;
  &lt;/a&gt;
&lt;/div&gt;
</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>
</div>


<h4>Crossfade</h4>

<div class="demo-with-code">
    <div class="demo-area">

        <abp-carousel indicators="false" crossfade="true">
            <abp-carousel-item src="@firstSlide"></abp-carousel-item>
            <abp-carousel-item src="@secondSlide"></abp-carousel-item>
            <abp-carousel-item src="@thirdSlide"></abp-carousel-item>
        </abp-carousel>
    </div>
    <div class="code-area">
        <abp-tabs>
            <abp-tab title="Tag Helper">
                <pre><code>
&lt;abp-carousel indicators=&quot;false&quot; crossfade=&quot;true&quot;&gt;
    &lt;abp-carousel-item src=&quot;...&quot;&gt;&lt;/abp-carousel-item&gt;
    &lt;abp-carousel-item src=&quot;...&quot;&gt;&lt;/abp-carousel-item&gt;
    &lt;abp-carousel-item src=&quot;...&quot;&gt;&lt;/abp-carousel-item&gt;
&lt;/abp-carousel&gt;
</code></pre>
            </abp-tab>
            <abp-tab title="Rendered">
                <pre><code>
&lt;div id=&quot;carouselExampleFade&quot; class=&quot;carousel slide carousel-fade&quot; data-bs-ride=&quot;carousel&quot;&gt;
  &lt;div class=&quot;carousel-inner&quot;&gt;
    &lt;div class=&quot;carousel-item active&quot;&gt;
      &lt;img class=&quot;d-block w-100&quot; src=&quot;...&quot; alt=&quot;First slide&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;carousel-item&quot;&gt;
      &lt;img class=&quot;d-block w-100&quot; src=&quot;...e&quot; alt=&quot;Second slide&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;carousel-item&quot;&gt;
      &lt;img class=&quot;d-block w-100&quot; src=&quot;...&quot; alt=&quot;Third slide&quot;&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;a class=&quot;carousel-control-prev&quot; href=&quot;#carouselExampleFade&quot; role=&quot;button&quot; data-bs-slide=&quot;prev&quot;&gt;
    &lt;span class=&quot;carousel-control-prev-icon&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
    &lt;span class=&quot;visually-hidden&quot;&gt;Previous&lt;/span&gt;
  &lt;/a&gt;
  &lt;a class=&quot;carousel-control-next&quot; href=&quot;#carouselExampleFade&quot; role=&quot;button&quot; data-bs-slide=&quot;next&quot;&gt;
    &lt;span class=&quot;carousel-control-next-icon&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;
    &lt;span class=&quot;visually-hidden&quot;&gt;Next&lt;/span&gt;
  &lt;/a&gt;
&lt;/div&gt;
</code></pre>
            </abp-tab>
        </abp-tabs>
    </div>
</div>

